import React from 'react'

import type { FC, ReactNode } from 'react'
import { memo } from 'react'

import MyUser from './style'
import { useNavigate } from 'react-router-dom'

interface Iprops {
  children?: ReactNode
}
const User: FC<Iprops> = () => {
  let userInfo: any = null
  try {
    const raw = localStorage.getItem('userinfo')
    if (raw) userInfo = JSON.parse(raw)
  } catch (e) {
    userInfo = null
  }
  const navigate = useNavigate()
  const goOrderPage = (str: string) => {
    navigate(`${str}`)
  }

  const handleQuit = () => {
    localStorage.removeItem('h5-token')
    localStorage.removeItem('userinfo')
    navigate('/login')
  }
  const handleShare = async () => {
    const shareData = {
      title: '陪诊App',
      text: '我正在使用这个小助手，一起看看吧！',
      url: window.location.origin // 分享当前网站首页
    }

    if (navigator.share) {
      try {
        await navigator.share(shareData)
        alert('分享成功！')
      } catch (err) {
        console.log('用户取消分享或出错', err)
      }
    } else {
      // 不支持 Web Share API，则复制链接
      navigator.clipboard.writeText(shareData.url)
      alert('已复制链接，可手动分享给好友')
    }
  }
  if (!userInfo) {
    return (
      <MyUser>
        <div className="my-page">
          <div className="user-info">
            <div className="username">未登录</div>
          </div>
          <div className="logout-btn" onClick={() => navigate('/login')}>
            去登录
          </div>
        </div>
      </MyUser>
    )
  }
  return (
    <MyUser>
      <div className="my-page">
        {/* 用户信息 */}
        <div className="user-info">
          <img className="avatar" src={userInfo.avatar} alt="用户头像" />
          <div className="username">{userInfo.name}</div>
        </div>

        {/* 我的订单 */}
        <div className="order-section">
          <div className="order-header">
            <span>我的订单</span>
            <span className="order-all">全部</span>
          </div>

          <div className="order-status">
            <div
              className="status-item"
              onClick={() => goOrderPage('/pz/order?state=1')}
            >
              <img
                src="https://img.icons8.com/ios-filled/50/00b578/wallet--v1.png"
                alt=""
              />
              <span>待支付</span>
            </div>
            <div
              className="status-item"
              onClick={() => goOrderPage('/pz/order?state=2')}
            >
              <img
                src="https://img.icons8.com/ios-filled/50/00b578/hand-holding-heart.png"
                alt=""
              />
              <span>待服务</span>
            </div>
            <div
              className="status-item"
              onClick={() => goOrderPage('/pz/order?state=3')}
            >
              <img
                src="https://img.icons8.com/ios-filled/50/00b578/checked-2.png"
                alt=""
              />
              <span>已完成</span>
            </div>
            <div
              className="status-item"
              onClick={() => goOrderPage('/pz/order?state=4')}
            >
              <img
                src="https://img.icons8.com/ios-filled/50/00b578/cancel.png"
                alt=""
              />
              <span>已取消</span>
            </div>
          </div>
        </div>

        {/* 功能区 */}
        <div className="function-section">
          <div className="function-item">
            <span>服务对象管理</span>
            <span className="arrow">›</span>
          </div>
          <div className="function-item" onClick={handleShare}>
            <span>分享转发</span>
            <span className="arrow">›</span>
          </div>
        </div>

        {/* 退出登录 */}
        <div className="logout-btn" onClick={handleQuit}>
          退出登录
        </div>

        {/* 底部导航 */}
        <div className="bottom-nav">
          <div className="nav-item">
            <img
              src="https://img.icons8.com/ios-filled/50/999999/home.png"
              alt=""
            />
            <span>首页</span>
          </div>
          <div className="nav-item">
            <img
              src="https://img.icons8.com/ios-filled/50/00b578/document.png"
              alt=""
            />
            <span>订单</span>
          </div>
          <div className="nav-item active">
            <img
              src="https://img.icons8.com/ios-filled/50/00b578/user.png"
              alt=""
            />
            <span>我的</span>
          </div>
        </div>
      </div>
      )
    </MyUser>
  )
}
export default memo(User)
